<template>
<div class="con">
    <div class="box1">
      <p>雪月</p>
      <ul>
         <li>后台管理系统</li>
         <li>BACKROUND MANACEMENT CENTER</li>
      </ul>
    </div>
    <div class="box2">
      <div class="com_box">
         <span>SIGN IN</span>
         <a href="#" style="color:blue">登录</a>
         </div>
      <el-form  status-icon  class="demo-ruleForm" :model="searchobj">
  <el-form-item>
    <el-input type="text"  autocomplete="off" v-model="searchobj.username"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input type="password"  autocomplete="off"  v-model="searchobj.password"></el-input>
  </el-form-item>
  <el-form-item  prop="checkPass">
    <el-button type="primary" round @click="save">登录</el-button>
  </el-form-item>
  <!-- <el-form-item  >
    <el-checkbox-group >
      <el-checkbox label="保持登录状态" name="type">保持登录状态</el-checkbox>
    </el-checkbox-group>
  </el-form-item> -->
</el-form>
    </div>
</div>
</template>
<script>
import {api_login} from '../../api/login';
import local from "../../utils/local.js";
export default {
   data() {
      return {
         searchobj:{
            username:'admin',
            password:'123456'
         },
         usersobj:{
            id:0,	//用户 ID
            rid:'',	//用户角色 ID
            username:'',	//用户名
            mobile:'',	//手机号
            email:'',	//邮箱
            token:'',	//令牌
         }
      }
   },
  
   methods: {
     async save(){
         let rst=await api_login(this.searchobj);
         let {data,meta}=rst;
         this.usersobj=data;
         if(meta.status){
            this.$message.success(meta.msg);
            local.set('mydb_token',data.token);
            this.$router.push('/home')
         }
      }
   },
}
</script>
<style lang="less" scoped>
.con{
   width: 100%;
   height: 100%;
   background: url(../../assets/images/位图@2x.png) no-repeat;
   background-size: cover;
   display: flex;
   justify-content: center;
   align-items: center;
   
   .box1{
      width: 400px;
      height: 300px;
      // border: 1px solid red;
      background-color: rgba(255, 255, 255, 0.1);
      position: relative;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      p{
         font-size: 40px;
         font-weight: 700;
         color: #2088FF;
         padding-top: 20px;
         padding-left: 20px;
      }
      ul{
         margin: 0 ;
         margin: 0 auto;
        position: absolute;
         bottom: 30px;
         left: 20px;
         li{
            color: white;
            &:nth-child(2){
               font-size: 12px;
            }
         }
      }
   }
   .box2{
      width: 300px;
      height: 300px;
      // border: 1px solid red;
      background-color: #fff;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      .com_box{
         // border: 1px solid red;
         display: inline-block;
         margin-top: 20px;
         position: relative;
         right: -180px;
         span{
            font-size: 13px;
         }
         a{
            font-size: 22px;
            margin-left: 5px;
         }
      }
      .el-form {
         margin-top: 20px;
         // border: 1px solid red;
         .el-form-item{
            display: flex;
            justify-content: center;
            align-items: center;
            .el-input{
               width: 260px;
               border-radius: 50%;
            }
         }
         .el-button{
            width: 260px;
         }
         .el-form-item{
            //  border: 1px solid red; 
            .el-checkbox-group{
               //  border: 1px solid red;
                .el-checkbox{
                  //  border: 1px solid red;
                  position: relative;
               left: 0;
                }
               
            }
           
         }
      }
   }
}
/deep/.el-input__inner{
   border-radius: 50px;
}
</style>